<template>
    <div class="shopcartlist" ref="shopcartlist">
        <transition name="fade">
            <div v-show="isShow" class="cartlist-back" @click="showOrHideAction"></div>
        </transition>
        <transition name="move">
            <div v-show="isShow" class="cartlist-list">
                <div class="topbar">
                    <div class="left-top-label">购物车</div>
                    <div class="right-top-label" @click="clearCart">清空</div>
                </div>
                <transition name="move">
                    <div class="contentlist" ref="contentlist">
                        <div>
                            <div
                                class="cell"
                                v-show="food.count>0"
                                v-for="(food, index) in selectedFoods"
                                :key="index"
                            >
                                <div class="cell-title">{{food.name}}</div>
                                <div class="cell-right">
                                    <div class="cell-price">¥{{food.price}}</div>
                                    <cartcontrol
                                        :food="food"
                                        class="cell-control"
                                        @addAction="addAction"
                                        @minusAction="minusAction"
                                    ></cartcontrol>
                                </div>
                            </div>
                        </div>
                    </div>
                </transition>
            </div>
        </transition>
    </div>
</template>

<script>
import cartcontrol from './cartcontrol'
import BScroll from 'better-scroll'

export default {
    props: {
        selectedFoods: {
            type: Array
        }
    },
    data() {
        return {
            isShow: false
        }
    },
    methods: {
        addAction(food) {
            food.count += 1
        },
        minusAction(food) {
            food.count -= 1
            if (food.count <= 0) {
                this.selectedFoods.shift(food)
            }
            if (this.selectedFoods.length <= 0) {
                this.isShow = false
            }
        },
        clearCart() {
            this.isShow = false
            this.$emit('clearCart')
        },
        showOrHideAction() {
            this.isShow = !this.isShow
        },
        reloadData() {
            if (!this.contentlist) {
                this.$nextTick(() => {
                    this.contentlist = new BScroll(this.$refs.contentlist, {
                        click: true
                    })
                })
            } else {
                this.contentlist.refresh()
            }
        }
    },
    components: {
        cartcontrol
    }
}
</script>

<style lang="less">
@import '../../common/mixin.less';
.shopcartlist {
    .cartlist-back {
        &.fade-enter-active,
        &.fade-leave-active {
            transition: all 0.25s;
        }
        &.fade-enter,
        &.fade-leave-to {
            opacity: 0;
        }
        position: fixed;
        display: inline-block;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        z-index: 60;
        backdrop-filter: blur(10px);
        background: rgba(7, 17, 27, 0.6);
    }
    .cartlist-list {
        &.move-enter-active,
        &.move-leave-active {
            transition: all 0.25s;
        }
        &.move-enter,
        &.move-leave-to {
            transform: translate3d(0, 100%, 0);
        }
        &.move-enter-to,
        &.move-leave {
            transform: translate3d(0, 0, 0);
        }
        position: fixed;
        left: 0;
        bottom: 46px;
        z-index: 61;
        display: inline-block;
        width: 100%;
        background: #f3f5f7;
        .topbar {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            .border-1px(rgba(7, 17, 27, 0.1));
            .left-top-label {
                display: inline-block;
                height: 40px;
                line-height: 40px;
                font-size: 14px;
                font-weight: 200;
                margin-left: 18px;
                color: rgb(7, 17, 27);
            }
            .right-top-label {
                display: inline-block;
                height: 40px;
                line-height: 40px;
                font-size: 12px;
                margin-right: 18px;
                color: rgb(0, 160, 220);
            }
        }
        .contentlist {
            background: white;
            max-height: 217px;
            overflow: hidden;
            .cell {
                display: flex;
                justify-content: space-between;
                height: 48px;
                width: 100%;
                .border-1px(rgba(7, 17, 27, 0.1), 10px);
                &:last-of-type {
                    .border-none();
                }
                .cell-title {
                    font-size: 14px;
                    line-height: 48px;
                    color: rgb(7, 17, 27);
                    margin-left: 18px;
                }
                .cell-right {
                    display: flex;
                    font-size: 0;
                    .cell-price {
                        display: inline-block;
                        font-size: 14px;
                        line-height: 48px;
                        font-weight: bold;
                        color: rgb(240, 20, 20);
                    }
                    .cell-control {
                        padding-top: 12px;
                        vertical-align: top;
                        margin: 0 18px;
                    }
                }
            }
        }
    }
}
</style>
